<template>
    <el-drawer :close-on-click-modal="false" class="hm-drawer" v-model="show" size="70%" direction="rtl"
        :before-close="handleClose">
        <template #header>
            <div class="hm-box-title">退还商家</div>
        </template>
        <el-form ref="supplierAddProductsFormRefInvite" :model="formInvite" style="width: 100%" :inline="true"
            label-width="135px" :rules="rulesInvite">
            <el-row class="hm-row3" :gutter="60">
                <el-col :span="8">
                    <el-form-item label="邮寄方式" prop="returnShippingMethod">
                        <el-select v-model="formInvite.returnShippingMethod" placeholder="请选择邮寄方式">
                            <el-option v-for="dict in hm_send" :key="dict.value" :label="dict.label"
                                :value="dict.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="物流司机联系方式" prop="returnDriverPhone">
                        <el-input v-model="formInvite.returnDriverPhone" placeholder="请输入物流司机联系方式" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="快递单号" prop="returnTrackingNumber">
                        <el-input v-model="formInvite.returnTrackingNumber" placeholder="请输入快递单号" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="hm-row3" :gutter="60">
                <el-col :span="8">
                    <el-form-item label="快递公司" prop="returnShippingCompany">
                        <el-select v-model="formInvite.returnShippingCompany" placeholder="请选择快递公司">
                            <el-option
                                v-for="dict in (formInvite.returnShippingMethod == '1' ? hm_express : formInvite.returnShippingMethod == '2' ? hm_shipping : [])"
                                :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <div class="hm-form-title">发货数量</div>
            <el-table :data="formInvite.data" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="商品名称" align="center" prop="styleName" />
                <el-table-column label="商品编码" align="center" prop="styleCode" />
                <el-table-column label="商品图片" align="center" prop="productImage" width="100">
                    <template #default="scope">
                        <image-preview :src="scope.row.productImage" :width="50" :height="50" />
                    </template>
                </el-table-column>
                <el-table-column label="类目" align="center" prop="categoryName" />
                <el-table-column label="发货数量" align="center" prop="inventory">
                    <!-- <template #default="{ row, $index }">
                        <el-form-item :prop="`data.${$index}.inventory`" :rules="rulesInvite.inventory">
                            <el-input v-model="row.inventory" placeholder="请输入发货数量" />
                        </el-form-item>
                    </template> -->
                </el-table-column>
            </el-table>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelInvite">取 消</el-button>
                <el-button :loading="buttonLoading" type="primary" @click="confirmClick">发货确认</el-button>
            </div>
        </template>

    </el-drawer>
</template>
<script setup name="ReturnMerchant" lang="ts">
import { SupplierAddProductsVO } from '@/api/system/supplierAddProducts/types';
import { FormInvite } from '@/api/system/supplierAddProducts/types';
import { putOff } from '@/api/group/investmentPromotion/index';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { hm_send } = toRefs<any>(proxy?.useDict('hm_send'));
const { hm_express } = toRefs<any>(proxy?.useDict('hm_express'));
const { hm_shipping } = toRefs<any>(proxy?.useDict('hm_shipping'));
const ids = ref<{ productsId?: string; id?: string;inventory?:string }[]>([]);
const supplierAddProductsFormRefInvite = ref<ElFormInstance>();
const buttonLoading = ref(false);
import { validateSpaceAndEmoji } from '@/utils/validate'

const rulesInvite = reactive({
    returnShippingMethod: [
        {
            required: true,
            message: '请选择邮寄方式',
            trigger: 'change'
        }
    ],
    returnDriverPhone: [
        { required: true, message: '请输入物流司机联系方式', trigger: 'blur' },
        { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的入物流司机联系方式' }
    ],
    returnTrackingNumber: [{ required: true, message: '请输入快递单号', trigger: 'blur' },{ validator: validateSpaceAndEmoji }],
    returnShippingCompany: [
        {
            required: true,
            message: '请选择快递公司',
            trigger: 'change'
        }
    ],
    inventory: [{ required: true, message: '请输入数量', trigger: 'blur' }],
});


const props = defineProps({
    returnMerchantVisible: {
        type: Boolean,
        default: false
    },
    returnMerchantData: {
        type: Array,
        default: false
    }
});
const show = computed(() => props.returnMerchantVisible);
const emits = defineEmits(['doClose'])
const handleClose = () => {
    emits('doClose')
}

const formInvite = reactive<FormInvite>({
    returnShippingMethod: '',
    returnDriverPhone: null,
    returnTrackingNumber: '',
    returnShippingCompany: '',
    data: toRef(props, 'returnMerchantData')
});


/** 表单重置 */
const resetInvite = () => {
    // formInvite = { ...initFormDataInvite };
    supplierAddProductsFormRefInvite.value?.resetFields();
};

/** 取消按钮 */
const cancelInvite = () => {
    resetInvite();
    handleClose();
};

/** 多选框选中数据 */
const handleSelectionChange = (selection: SupplierAddProductsVO[]) => {
    ids.value = selection.map((item) => ({ productsId: item.productsId, id: item.id }));
};
/** 确认 */
const confirmClick = async () => {
    const { returnShippingMethod, returnShippingCompany, returnDriverPhone, returnTrackingNumber } = { ...formInvite }
    const list = ids.value.map(item => (
        {
            returnShippingMethod,
            returnShippingCompany,
            returnDriverPhone,
            returnTrackingNumber,
            id: item.id,
            productsId: item.productsId
        }
    ))
    supplierAddProductsFormRefInvite.value?.validate(async (valid: boolean) => {
        if (valid) {
            if (ids.value.length > 0) {
                // buttonLoading.value = true;
                await putOff(list)
                // buttonLoading.value = false;
                resetInvite();
                proxy?.$modal.msgSuccess('发货确认成功');
                handleClose()
            } else {
                proxy?.$modal.msgError('请勾选退还商家商品');
            }

        }
    })

}

</script>